/** @jsxImportSource @emotion/react */
//import { jsx, css } from "@emotion/react";
import * as React from "react";
import {
    Navbar,
    Toolbar,
    Text,
    Button,
    IconButton,
    MenuList,
    MenuItem,
    useTheme,
    useToast,
    LayerLoading,
    Container,
    IconMoreVertical,
    IconArrowLeft, IconArrowRight, IconPackage, IconRefButton, VerticalMenu, DdMenuItem, TwoHalfRightPanel
} from "customize-easy-ui-component";
import { Link as RouterLink } from "../routing/Link";
//import {Helmet} from "react-helmet";
//import { Link as RouterLink, Route, Switch, useLocation, useRoute } from "wouter";
//import { ContainLine, TransparentInput } from "../comp/base";
//import {useDeviceDetail, useRemoveEQP} from "./db";
//import { AddToTask } from "./task/AddToTask";
//import { DeviceDetail } from "./DeviceDetail";
import { ComposePipingUnit } from "./ComposePipingUnit";
//graphql不能用react-relay/hooks的。报错 Unexpected invocation at runtime. Either the Babel transform was not set up, or it failed to identify
import {PreloadedQuery, usePreloadedQuery} from "react-relay/hooks";
import { PipeLineGuideQuery } from "./__generated__/PipeLineGuideQuery.graphql";
import {PipingUnitDetail} from "./PipingUnitDetail";

const graphql = require("babel-plugin-relay/macro");    //必须这样!编译器解析graphql文本代码。


interface PipeLineGuideProps {
    id?: string;   　//来自上级<Route path={"/device/:id/"} component={} />给的:id。
    prepared: {
        eqpQuery: PreloadedQuery<PipeLineGuideQuery>;
    }
    children: React.ReactNode;
    routeData: any;
}
//右半边页面
export default function PipeLineGuide(props: PipeLineGuideProps) {
    //console.log("刚DetailedGuide经过props",props);
    const theme = useTheme();
    const toast = useToast();
   // const [, setLocation] = useLocation();
   // const [match, params] = useRoute("/device/:id/:rest*");
   // let id =(match && params.id);
   // if(id==='new')
    //const id=undefined;
    const data = usePreloadedQuery<PipeLineGuideQuery>(
        graphql`
            query PipeLineGuideQuery($id: ID! ) {
                node(id: $id) {
                    id,
                    ... on PipingUnit {
                      code name rno  pipe{id useu{id company{id name} person{id name}} },
                        svp,pa,leng,insd,used,mdi matr start stop
                        desu{id company{id name} person{id name}} 
                        insu{id company{id name} person{id name}}
                        dia,thik safe lay level proj nxtd1 nxtd2 ust
                        isp1{id,conclusion,ispDate,no} isp2{id,conclusion,ispDate,no}
                        ispsv{id,conclusion,ispDate,no} ninsp regd reg
                        ad{id,prefix,name,country{id},province{id},city{id},county{id},town{id}},
                    },
                    __typename
                }
            }
        `,
        props.prepared.eqpQuery,
    );
    const { node:eqp, }=data;


  async function updateRecipe(id: string) {
    try {
    //  await updateFunc();
    } catch (err: any) {
      toast({
        title: "后端报错",
        subtitle: err.message,
        intent: "error"
      });
      return;
    }
    toast({
      title: "返回了",
      subtitle: '作废 ID＝'+id,
      intent: "info"
    });
  }

  return (
      <TwoHalfRightPanel
          title={`管道单元ID号：${eqp?.id!}`}
          back={
              <RouterLink href={`/pipeline/${eqp?.pipe?.id!}/`}>
                  <IconButton  noBind  icon={<IconArrowLeft />}
                               variant="ghost"
                               label="后退"
                               size="md"
                               css={{
                                   marginRight: theme.spaces.sm,
                                   [theme.mediaQueries.md]: {
                                       display: "none"
                                   }
                               }}
                  />
              </RouterLink>
          }
          menu={
              <VerticalMenu>
                  <DdMenuItem label="生成新任务"
                          onClick={(e) => {
                              //   setLocation("/device/"+id+"/addTask", { replace: false });
                          }}/>
              </VerticalMenu>
          }
      >
            <div
              css={{
                display: 'flex',
                alignItems:'center',
                justifyContent:'center',
                minHeight: '85vh',
                [theme.mediaQueries.md]: {
                  paddingTop: theme.spaces.lg,
                  paddingBottom: theme.spaces.lg,
                  minHeight:'unset',
                }
              }}
            >
                <div
                  css={{
                  width:'100%',
                }}
                >
                     <PipingUnitDetail id={props.routeData.params.ppuId!} eqp={eqp}/>
                  <div css={{ marginTop: theme.spaces.sm }}>
                    <RouterLink href={`/device/`}>
                      <Button
                        size="lg" noBind
                        intent="primary"
                        iconAfter={<IconArrowRight />}
                      >
                        其他功能
                      </Button>
                    </RouterLink>
                  </div>
                </div>
            </div>
      </TwoHalfRightPanel>
  );
};



/*为了能立刻刷新操作反馈页面，引入三级路由，把数据获取放在了公共上级组件去，某页面操作的同时能更新查询另外页面显示立即反馈到。
function ThirdRouterContent({id, device}: ThirdRouterProps) {
    return (
        <React.Fragment>
            <Switch>
                <Route path={"/device/new"}>
                    <ComposeDevice  readOnly={false}/>
                </Route>
                <Route path={"/device/:id/addTask"}>
                    <AddToTask id={id} dt={device}/>
                </Route>
                <Route path={`/device/:id`}>
                    <DeviceDetail id={id} eqp={device}/>
                </Route>
                <Route path="/:rest*">没该URL内容</Route>
            </Switch>
        </React.Fragment>
    );
}*/
